<template>
  <div class="map-block-wrapper border border-white" @click="handleClick">
    <img class="map-icon" :src="imageMap[col]" />
  </div>
</template>

<script setup lang="ts">
import { cssWidthHeight, imageMap, MapTile } from '@/constants';
import { useElementEditStore } from '@/stores/elementEdit';
import { computed } from 'vue';

const { col, x, y } = defineProps<{
  x: number;
  y: number;
  col: MapTile;
}>();
let { getCurrentSelectedElement } = useElementEditStore();

const handleClick = () => {
  getCurrentSelectedElement().execute({ x, y });
};
</script>

<style scoped lang="scss">
.map-block-wrapper {
  .map-icon {
    width: v-bind(cssWidthHeight);
    height: v-bind(cssWidthHeight);
  }
}
</style>
